<template>
    <div class="body">
        <div class="log">
            <h1>Login</h1>
            <el-form label-width="auto" style="max-width: 300px" :rules="rules" ref="ruleFormRef" :model="ruleForm">
                <el-form-item label="账号" prop="account">
                    <el-input type="text" v-model="ruleForm.account"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input :type="isVisible ? 'text' : 'password'" v-model="ruleForm.password"/>
                    <span class="toggle-eye">  
                        <el-icon @click="toggleVisibility">  
                            <View v-if="isVisible"/>
                            <Hide v-else/>
                        </el-icon>  
                    </span>  
                </el-form-item><br>
                <el-form-item class="button">
                    <el-button :plain="true" type="primary" @click="log(ruleFormRef)" class="b">登录</el-button>
                    <el-button :plain="true" type="primary" class="b">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>


<script setup lang="ts" name="Login">
// 从 Element Plus 导入需要的组件  
import { ElButton, ElIcon } from 'element-plus';  
// 从 Element Plus 图标库中导入特定图标  
import { View,Hide } from '@element-plus/icons-vue'; 
import type { FormInstance,FormRules } from 'element-plus';
import { ElMessage } from 'element-plus';
import {ref,reactive} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
//数据
let isVisible=ref<boolean>(false);
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    account:string;
    password:string;
}
const ruleForm = reactive<RuleForm>({
    account:"",
    password:""
})

const router = useRouter();
//方法
const rules = reactive<FormRules<RuleForm>>({
    account: [
        { required: true, message: '账号不能为空', trigger: 'blur' }
    ],
    password: [
    {
        required: true,
        message: '密码不能为空',
        trigger: 'blur',
    }]
})
function log(form:FormInstance|undefined){
    //根据账号查询密码
    if(!form) return;
    form.validate((valid, fields) => {  
        if (valid) {  
            axios.post('http://localhost:8080/login',{
                username:ruleForm.account,
                password:ruleForm.password
            })
            .then((response) => {
                if(response.data.code==1)
                {
                    router.push({
                        name:'condition',
                        query:{
                            account:ruleForm.account
                        }
                    });
                    ElMessage.success({message:'Ciallo～(∠・ω＜)⌒☆',showClose:true});
                }
                else
                    ElMessage.error({message:response.data.msg,showClose:true}); 
            })
        }
    });  
}
function toggleVisibility() {  
    isVisible.value = !isVisible.value; // 切换可见性  
}  
</script>


<style scoped>
.body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(image/1.png);
    background-size: cover;
}
.log{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:360px;
    height: 350px;
    border-top:1px solid rgba(255,255,255,0.5);
    border-left:1px solid rgba(255,255,255,0.5);
    border-bottom:1px solid rgba(255,255,255,0.5);
    border-right:1px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(10px);
}
.button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.b{
    color: white !important;
    width:130px !important;
    background-color: aqua !important;
}
.toggle-eye {  
    position: absolute;  
    right: 10px;  
    top: 0px;  
    cursor: pointer;  
    font-size: 20px; /* 可根据需求调整大小 */  
}  
</style>